<template>
  <ErhaEcharts ref="EchartsRef6" chatKey="echarts_6" :option="option6" style="height: 800px; width: 100%"/>


  <div class="home_page" v-if="false">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <ErhaCard>
          <template #title>
            基础折线图
          </template>
          <template #body>
            <ErhaEcharts chatKey="echarts_1" :option="option1" style="height: 300px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <ErhaCard>
          <template #title>
            基础柱状图
          </template>
          <template #body>
            <ErhaEcharts chatKey="echarts_2" :option="option2" style="height: 300px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>

    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <ErhaCard>
          <template #title>
            基础饼图
          </template>
          <template #body>
            <ErhaEcharts chatKey="echarts_3" :option="option3" style="height: 300px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <ErhaCard>
          <template #title>
            环形图
          </template>
          <template #body>
            <ErhaEcharts chatKey="echarts_4" :option="option4" style="height: 300px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>

    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <ErhaCard>
          <template #title>
            基础散点图
          </template>
          <template #body>
            <ErhaEcharts chatKey="echarts_5" :option="option5" style="height: 300px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <ErhaCard>
          <template #title>
            庖丁解牛
          </template>
          <template #body>
            <ErhaEcharts ref="EchartsRef6" chatKey="echarts_6" :option="option6" style="height: 800px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <ErhaCard>
          <template #title>
            航班选座（SVG）
          </template>
          <template #body>
            <ErhaEcharts ref="EchartsRef7" chatKey="echarts_7" :option="option7" style="height: 300px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <ErhaCard>
          <template #title>
            GEO 路径图（SVG）
          </template>
          <template #body>
            <ErhaEcharts ref="EchartsRef8" chatKey="echarts_8" :option="option8" style="height: 300px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <ErhaCard>
          <template #title>
            Bar3D - Punch Card
          </template>
          <template #body>
            <ErhaEcharts ref="EchartsRef9" chatKey="echarts_9" :option="option9" style="height: 500px; width: 100%"/>
          </template>
        </ErhaCard>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import ErhaEcharts from '@/components/ErhaEcharts/index.vue'
import ErhaCard from '@/components/ErhaCard/index.vue'
import * as echarts from 'echarts';
import axios from "axios";


const option1 = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
})
const option2 = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
})
const option3 = ref({
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
const option4 = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'}
      ]
    }
  ]
})
const option5 = ref({
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
      ],
      type: 'scatter'
    }
  ]
})

const EchartsRef6 = ref()
const option6 = ref({})

const option7 = ref({})
const EchartsRef7 = ref()


const option8 = ref({})
const EchartsRef8 = ref()

onMounted(() => {
  // chat6
  const url6 = '/examples/data/asset/geo/Beef_cuts_France.svg'
  axios.get(`/echartsApi/${url6}`).then(res => {
    let myChart = EchartsRef6.value.myChart
    // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
    echarts.registerMap('Beef_cuts_France', { svg:  res.data});
    const option = {
      tooltip: {},
      visualMap: {
        left: 'center',
        bottom: '10%',
        min: 5,
        max: 100,
        orient: 'horizontal',
        text: ['', 'Price'],
        realtime: true,
        calculable: true,
        inRange: {
          color: ['#dbac00', '#db6e00', '#cf0000']
        }
      },
      series: [
        {
          name: 'French Beef Cuts',
          type: 'map',
          map: 'Beef_cuts_France',
          roam: true,
          emphasis: {
            label: {
              show: false
            }
          },
          selectedMode: false,
          data: [
            { name: 'Queue', value: 15 },
            { name: 'Langue', value: 35 },
            { name: 'Plat de joue', value: 15 },
            { name: 'Gros bout de poitrine', value: 25 },
            { name: 'Jumeau à pot-au-feu', value: 45 },
            { name: 'Onglet', value: 85 },
            { name: 'Plat de tranche', value: 25 },
            { name: 'Araignée', value: 15 },
            { name: 'Gîte à la noix', value: 55 },
            { name: "Bavette d'aloyau", value: 25 },
            { name: 'Tende de tranche', value: 65 },
            { name: 'Rond de gîte', value: 45 },
            { name: 'Bavettede de flanchet', value: 85 },
            { name: 'Flanchet', value: 35 },
            { name: 'Hampe', value: 75 },
            { name: 'Plat de côtes', value: 65 },
            { name: 'Tendron Milieu de poitrine', value: 65 },
            { name: 'Macreuse à pot-au-feu', value: 85 },
            { name: 'Rumsteck', value: 75 },
            { name: 'Faux-filet', value: 65 },
            { name: 'Côtes Entrecôtes', value: 55 },
            { name: 'Basses côtes', value: 45 },
            { name: 'Collier', value: 85 },
            { name: 'Jumeau à biftek', value: 15 },
            { name: 'Paleron', value: 65 },
            { name: 'Macreuse à bifteck', value: 45 },
            { name: 'Gîte', value: 85 },
            { name: 'Aiguillette baronne', value: 65 },
            { name: 'Filet', value: 95 }
          ]
        }
      ]
    }
    myChart.setOption(option);
  })

  // chat7
  const url7 = '/examples/data/asset/geo/flight-seats.svg'
  axios.get(`/echartsApi/${url7}`).then(res => {
    let myChart = EchartsRef7.value.myChart
    const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];
    // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
    echarts.registerMap('flight-seats', { svg:  res.data});
    const option = {
      tooltip: {},
      geo: {
        map: 'flight-seats',
        roam: true,
        selectedMode: 'multiple',
        layoutCenter: ['50%', '50%'],
        layoutSize: '95%',
        tooltip: {
          show: true
        },
        itemStyle: {
          color: '#fff'
        },
        emphasis: {
          itemStyle: {
            color: undefined,
            borderColor: 'green',
            borderWidth: 2
          },
          label: {
            show: false
          }
        },
        select: {
          itemStyle: {
            color: 'green'
          },
          label: {
            show: false,
            textBorderColor: '#fff',
            textBorderWidth: 2
          }
        },
        regions: makeTakenRegions(takenSeatNames)
      }
    }
    function makeTakenRegions(takenSeatNames) {
      var regions = [];
      for (var i = 0; i < takenSeatNames.length; i++) {
        regions.push({
          name: takenSeatNames[i],
          silent: true,
          itemStyle: {
            color: '#bf0e08'
          },
          emphasis: {
            itemStyle: {
              borderColor: '#aaa',
              borderWidth: 1
            }
          },
          select: {
            itemStyle: {
              color: '#bf0e08'
            }
          }
        });
      }
      return regions;
    }
    myChart.setOption(option);
    myChart.on('geoselectchanged', function (params) {
      const selectedNames = params.allSelected[0].name.slice();
      for (var i = selectedNames.length - 1; i >= 0; i--) {
        if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
          selectedNames.splice(i, 1);
        }
      }
      console.log('selected', selectedNames);
    });
  })

  // chat8
  const url8 = '/examples/data/asset/geo/MacOdrum-LV5-floorplan-web.svg'
  axios.get(`/echartsApi/${url8}`).then(res => {
    let myChart = EchartsRef8.value.myChart
    // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
    echarts.registerMap('MacOdrum-LV5-floorplan-web', { svg:  res.data});
    const option = {
      title: {
        text: 'Visit Route',
        left: 'center',
        bottom: 10
      },
      tooltip: {},
      geo: {
        map: 'MacOdrum-LV5-floorplan-web',
        roam: true,
        emphasis: {
          itemStyle: {
            color: undefined
          },
          label: {
            show: false
          }
        }
      },
      series: [
        {
          name: 'Route',
          type: 'lines',
          coordinateSystem: 'geo',
          geoIndex: 0,
          emphasis: {
            label: {
              show: false
            }
          },
          polyline: true,
          lineStyle: {
            color: '#c46e54',
            width: 5,
            opacity: 1,
            type: 'dotted'
          },
          effect: {
            show: true,
            period: 8,
            color: '#a10000',
            constantSpeed: 80,
            trailLength: 0,
            symbolSize: [20, 12],
            symbol:
                'path://M35.5 40.5c0-22.16 17.84-40 40-40s40 17.84 40 40c0 1.6939-.1042 3.3626-.3067 5H35.8067c-.2025-1.6374-.3067-3.3061-.3067-5zm90.9621-2.6663c-.62-1.4856-.9621-3.1182-.9621-4.8337 0-6.925 5.575-12.5 12.5-12.5s12.5 5.575 12.5 12.5a12.685 12.685 0 0 1-.1529 1.9691l.9537.5506-15.6454 27.0986-.1554-.0897V65.5h-28.7285c-7.318 9.1548-18.587 15-31.2715 15s-23.9535-5.8452-31.2715-15H15.5v-2.8059l-.0937.0437-8.8727-19.0274C2.912 41.5258.5 37.5549.5 33c0-6.925 5.575-12.5 12.5-12.5S25.5 26.075 25.5 33c0 .9035-.0949 1.784-.2753 2.6321L29.8262 45.5h92.2098z'
          },
          data: [
            {
              coords: [
                [110.6189462165178, 456.64349563895087],
                [124.10988522879458, 450.8570048730469],
                [123.9272226116071, 389.9520693708147],
                [61.58708083147317, 386.87942320312504],
                [61.58708083147317, 72.8954315876116],
                [258.29514854771196, 72.8954315876116],
                [260.75457021484374, 336.8559607533482],
                [280.5277985253906, 410.2406672084263],
                [275.948185765904, 528.0254369698661],
                [111.06907909458701, 552.795792593471],
                [118.87138231445309, 701.365737015904],
                [221.36468155133926, 758.7870354617745],
                [307.86195445452006, 742.164737297712],
                [366.8489324762834, 560.9895157073103],
                [492.8750778390066, 560.9895157073103],
                [492.8750778390066, 827.9639780566406],
                [294.9255269587053, 827.9639780566406],
                [282.79803391043527, 868.2476088113839]
              ]
            }
          ]
        }
      ]
    }
    myChart.setOption(option);
  })
})


var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
  '7a', '8a', '9a', '10a', '11a',
  '12p', '1p', '2p', '3p', '4p', '5p',
  '6p', '7p', '8p', '9p', '10p', '11p'];
// prettier-ignore
var days = ['Saturday', 'Friday', 'Thursday',
  'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
// prettier-ignore
var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
const option9 = ref({
  tooltip: {},
  visualMap: {
    max: 20,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  xAxis3D: {
    type: 'category',
    data: hours
  },
  yAxis3D: {
    type: 'category',
    data: days
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      // projection: 'orthographic'
    },
    light: {
      main: {
        intensity: 1.2,
        shadow: true
      },
      ambient: {
        intensity: 0.3
      }
    }
  },
  series: [
    {
      type: 'bar3D',
      data: data.map(function (item) {
        return {
          value: [item[1], item[0], item[2]]
        };
      }),
      shading: 'lambert',
      label: {
        fontSize: 16,
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20,
          color: '#900'
        },
        itemStyle: {
          color: '#900'
        }
      }
    }
  ]
})
</script>

<style scoped lang="scss">
.home_page {
  padding: 10px;

  .el-row ~ .el-row {
    margin-top: 10px;
  }
}
</style>
